<template>
  <CommonQueryLayout class="image-control">
    <template #top>
      <QueryForm
        :form="queryFormBind"
        :form-item-list="queryFormItems"
        :loading="searchMaterialLoading"
        @query="searchMaterialList"
      ></QueryForm>
    </template>
    <template #default>
      <CommonTopControl title-text="素材列表"></CommonTopControl>
      <MaterialList
        :data-source="materialTableState.tableData"
        :loading="searchMaterialLoading"
      >
        <template #actions="{ item }">
          <Simbtn
            type="primary"
            size="small"
            icon="form-outlined"
            text="编辑素材信息"
            :loading="initEditMatDiaLoading"
            @click="openEditMatInfoDia(item)"
          />
          <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="confirmAddAtlas(item)"
            @cancel="cancelAddAtlas"
            v-model:visible="item.modifyAtlasPopVisible"
          >
            <template #title>
              <p>编辑图集</p>
              <SelectAtlasInput
                :material="item"
                v-model:value="selectedAtlas"
                @remove="searchMaterialList"
              />
            </template>
            <Simbtn
              type="primary"
              size="small"
              @click="openEditAtlas(item)"
              icon="appstore-add-outlined"
              :loading="
                modifyMaterialAtlasLoading || removeMaterialAtlasLoading
              "
              text="编辑图集"
            />
          </a-popconfirm>
          <a-popconfirm
            title="确定下架此素材吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="unShelveMaterial(item)"
          >
            <Simbtn
              v-if="item.status === MaterialStatus.NORMAL"
              type="primary"
              size="small"
              :loading="modifyMaterialInfoLoading"
              danger
              text="下架"
              icon="vertical-align-bottom-outlined"
            />
          </a-popconfirm>
          <a-popconfirm
            title="确定上架此素材吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="shelveMaterial(item)"
          >
            <Simbtn
              v-if="item.status === MaterialStatus.FORBIDDEN"
              type="primary"
              size="small"
              :loading="modifyMaterialInfoLoading"
              danger
              text="上架"
              icon="vertical-align-top-outlined"
            />
          </a-popconfirm>
        </template>
      </MaterialList>
      <div class="image-control__page-wrapper">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :show-total="formatTotalPageText"
          v-model:current="pageInfo.current"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="pageChange"
          @showSizeChange="pageSizeChange"
        />
      </div>
    </template>
  </CommonQueryLayout>
  <EditMatInfoDia
    :data-wrapper="editMatInfoDiaState"
    :search-tag-loading="searchTagListLoading"
    :quick-add-tag-loading="optionTagLoading"
    :confirm-loading="updateMatV2Loading"
    @enter="confirmEditMatInfoDia"
    @search-tag="searchTags"
    @open-quick-add-tag="openQuickAddTag"
    @confirm-quick-add-tag="confirmQuickAddTag"
  />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { MaterialStatus } from '@/components/ItemList/MaterialList/types'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { QueryForm } from '@/components/Form'
import { CommonTopControl } from '@/components/TopControl'
import { MaterialList } from '@/components/ItemList'
import { Simbtn } from '@/components/Button'
import { SelectAtlasInput } from '@/components/Input'
import EditMatInfoDia from './components/EditMatInfoDia.vue'

import useHandleMaterialList from './hooks/useHandleMaterialList'
import useSearchMateries from './hooks/useSearchMateries'
import useEditAtlas from './hooks/useEditAtlas'
import useUpdateShelve from './hooks/useUpdateShelve'
import useEditMatInfoDia from './hooks/useEditMatInfoDia'

// 素材列表处理相关逻辑
const { pageInfo, materialTableState } = useHandleMaterialList()

// 素材列表搜索相关逻辑
const {
  queryFormBind,
  queryFormItems,
  searchMaterialLoading,
  searchMaterialList,
  pageChange,
  pageSizeChange,
  formatTotalPageText,
} = useSearchMateries(materialTableState, pageInfo)

// 修改当前素材的图集相关逻辑
const {
  selectedAtlas,
  confirmAddAtlas,
  cancelAddAtlas,
  openEditAtlas,
  modifyMaterialAtlasLoading,
  removeMaterialAtlasLoading,
} = useEditAtlas(searchMaterialList)

// 素材上下架逻辑
const { unShelveMaterial, shelveMaterial, modifyMaterialInfoLoading } =
  useUpdateShelve(searchMaterialList)

const {
  editMatInfoDiaState,
  openEditMatInfoDia,
  confirmEditMatInfoDia,
  searchTags,
  searchTagListLoading,
  confirmQuickAddTag,
  openQuickAddTag,
  optionTagLoading,
  initEditMatDiaLoading,
  updateMatV2Loading,
} = useEditMatInfoDia(searchMaterialList)

onMounted(async () => {
  await searchMaterialList()
})
</script>

<style lang="scss" scoped>
@include b(image-control) {
  @include e(page-wrapper) {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
